<template>
  <a-upload-dragger
    name="file"
    :loading="loading"
    :multiple="true"
    :showUploadList="false"
    accept="image/*"
    :before-upload="beforeUpload"
    @remove="handleRemove"
  >
    <div>
      <template v-if="!loading">
        <div style="display: flex;align-items: center;justify-content: center;font-size: 16px;">
          <svg t="1746842532942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3431" width="20" height="20"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m192 472c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z" p-id="3432" fill="#a11f24"></path></svg>
          拖拽图片到这里，或<span style="text-decoration: underline;color: #a11f24;">点击添加</span></div>
        <div style="color: #999;font-size: 14px;">上传素材</div>
      </template>
      <a-spin :spinning="loading" v-else>
      </a-spin>
    </div>
  </a-upload-dragger>
</template>

<script setup>
  import { getToken } from '@/utils/token'
  import { BASEURL } from '@/utils/const'
  import { defineEmits } from 'vue'
  import methods from '@/utils/methods'

  const emit = defineEmits(['change'])

  const fileList = ref([])
  const uploadNumber = ref(0)
  const uploadNumberMax = ref(0)
  const loading = ref(false)
  // 获取上传文件
  const beforeUpload = (file, fileLists) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
      return
    }
    uploadNumberMax.value = fileLists.length
    loading.value = true
    uploadFile(file).then(async res => {
      if(res.code === 200) {
        res.result.compressImage = await methods.compressImage(file, { width: 400 })
        if(res.result.imageUrl.includes('.gif') || res.result.imageUrl.includes('.GIF')) {
          res.result.imgAbridgePath = res.result.imageUrl
        }else {
          res.result.imgAbridgePath = await uploadCompressImage(file)
        }
        fileList.value.push(res.result)
        uploadNumber.value ++
        if(uploadNumberMax.value === uploadNumber.value) {
          emit('change', fileList.value)
          fileList.value = []
          loading.value = false
          uploadNumber.value = 0
        }
      }
    })
  }

  const uploadCompressImage = (file) => {
    return new Promise(async (resolve) => {
      const newFile = await methods.compressImageFile(file, { width: 400 })
      uploadFile(newFile).then(async res => {
        if(res.code === 200) {
          resolve(res.result.imageUrl)
        }
      })
    })
  }

  const uploadFile = (file) => {
    return new Promise((resolve, reject) => {
      // 创建formData对象
      const formData = new FormData();
      formData.append('file', file);

      // 使用fetch API上传图片
      fetch(BASEURL + '/common/upload', {
          method: 'POST',
          body: formData,
          headers: {
            'x-access-token': getToken(),
          }
      }).then(response => response.json())
        .then(data => {
          resolve(data)
        })
        .catch((error) => console.error('Error:', error));
    })
  }

  // 删除文件
  const handleRemove = () => {}


</script>

<style>

</style>
